<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>给宝宝的惊喜</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #ffebee;
            transition: background 1s;
            overflow: hidden;
        }
        
        #button {
            padding: 15px 30px;
            font-size: 20px;
            background-color: #ff4081;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: transform 0.3s;
            z-index: 10;
        }
        
        #button:hover {
            transform: scale(1.1);
            background-color: #f50057;
        }
        
        #message {
            font-size: 36px;
            color: #d81b60;
            margin-top: 30px;
            opacity: 0;
            transition: opacity 2s;
            position: relative;
            z-index: 10;
            text-shadow: 0 0 10px rgba(255,255,255,0.8);
        }
        
        .heart {
            position: absolute;
            pointer-events: none;
            animation: float 4s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            50% {
                transform: translateY(-20px) rotate(10deg);
                opacity: 0.7;
            }
        }
        
        .romantic-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            opacity: 0;
            transition: opacity 1s;
            z-index: 1;
        }
    </style>
</head>
<body>
    <button id="button">宝宝请点击</button>
    <div id="message">杨涵我爱你！</div>
    <div class="romantic-bg" id="bg"></div>

    <script>
        const button = document.getElementById('button');
        const message = document.getElementById('message');
        const bg = document.getElementById('bg');
        
        button.addEventListener('click', function() {
            // 显示浪漫背景和消息
            bg.style.opacity = '1';
            message.style.opacity = '1';
            
            // 隐藏按钮
            button.style.display = 'none';
            
            // 创建爱心
            createHearts();
        });
        
        function createHearts() {
            // 创建30个爱心
            for (let i = 0; i < 30; i++) {
                setTimeout(() => {
                    const heart = document.createElement('div');
                    heart.innerHTML = '❤';
                    heart.classList.add('heart');
                    
                    // 随机位置
                    heart.style.left = Math.random() * 100 + 'vw';
                    heart.style.top = Math.random() * 100 + 'vh';
                    
                    // 随机大小
                    const size = Math.random() * 30 + 20;
                    heart.style.fontSize = size + 'px';
                    
                    // 随机颜色
                    const colors = ['#ff4081', '#e91e63', '#c2185b', '#ff80ab', '#f50057'];
                    heart.style.color = colors[Math.floor(Math.random() * colors.length)];
                    
                    // 随机动画延迟
                    heart.style.animationDelay = Math.random() * 2 + 's';
                    
                    document.body.appendChild(heart);
                    
                    // 10秒后移除爱心
                    setTimeout(() => {
                        heart.remove();
                    }, 10000);
                }, i * 200);
            }
            
            // 持续创建爱心
            setInterval(() => {
                const heart = document.createElement('div');
                heart.innerHTML = '❤';
                heart.classList.add('heart');
                
                heart.style.left = Math.random() * 100 + 'vw';
                heart.style.top = Math.random() * 100 + 'vh';
                heart.style.fontSize = (Math.random() * 30 + 20) + 'px';
                
                const colors = ['#ff4081', '#e91e63', '#c2185b', '#ff80ab', '#f50057'];
                heart.style.color = colors[Math.floor(Math.random() * colors.length)];
                
                heart.style.animationDelay = Math.random() * 2 + 's';
                
                document.body.appendChild(heart);
                
                setTimeout(() => {
                    heart.remove();
                }, 10000);
            }, 300);
        }
    </script>
</body>
</html>